<template>
  账号：<input v-model="account" type="text" />
  <br />
  <br />
  员工薪资：<input v-model="emp.salary" type="number" />

  <hr />
  账号：<input v-model="account" type="text" />
  <hr />
  员工薪资：<input v-model="emp.salary" type="number" />
  <hr />
  部门名称：<input v-model="dept.name" type="text" />

  <hr />
  <h1 id="titlePassword">
    密码：
    <i>{{ password }}</i>
  </h1>
  密码：<input v-model="password" type="password" />

  <hr />
  账号：<input v-model="account" type="text" />
  <button @click="stopAccountWatch">停止账号侦听器</button>
</template>

<script setup>
import { reactive, ref, watch, watchEffect } from 'vue' // 引入 watch 函数

let account = ref('Abc')
let emp = reactive({
  // 员工
  name: 'Jack',
  salary: 7000,
})
let dept = reactive({
  // 部门
  id: '101',
  name: '销售部',
})
let password = ref('123456') // 密码

watch(account, (newData, oldData) => {
  // 侦听：原始类型的数据变化
  console.log('===== 账号新旧值 =====')
  console.log(newData, oldData)
})

watch(
  () => emp.salary,
  (newData, oldData) => {
    // 侦听：对象中的某一个属性变化（需要提供 getter 函数才行）
    console.log('===== 员工薪资新旧值 =====')
    console.log(newData, oldData)
    // 默认情况下回调的触发机制在Dom更新之前执行
    console.log(document.getElementById('titlePassword').innerHTML)
  },
  { immediate: true },
)

watch(
  [account, () => emp.salary, dept], // 侦听多个数据源组成的数组
  ([newAccount, newSalary, newDept], [oldAccount, oldSalary, oldDept]) => {
    // 参数一：新值数组，参数二：旧值数组
    console.log('===== 账号新旧值 =====')
    console.log(newAccount, oldAccount)
    console.log('===== 薪资新旧值 =====')
    console.log(newSalary, oldSalary)
    console.log('===== 部门新旧值 =====')
    console.log(newDept, oldDept)
  },
  { deep: true }, //深度监听
)

let stopAccountWatch = watch(account, (newData, oldData) => {
  // 停止侦听器：调用 watch 返回的函数即可
  console.log('===== 账号 =====')
  console.log(newData, oldData)
})

watchEffect(() => {
  // 创建成功后，监听到数据源立即执行一遍
  console.log('账号：' + account.value) // 如果此处用到了数据源，如果该数据源的值发生了变化，会重新执行该回调函数
  console.log('员工的薪资：' + emp.salary)
})
</script>
